<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../manager/base.jsp"%>
<script type="text/javascript" src="${ctx}/layui/layui.all.js"></script>
<link rel="stylesheet" type="text/css" href="${ctx}/layui/css/layui.css">
<script type="text/javascript" src="${ctx}/js/layui_common.js"></script>
<script type="text/javascript" src="${ctx}/js/md5.js"></script>
<script type="text/javascript">
$(function() {
	//自适应屏幕宽度

	var main_h = $(window).height();
	$('.hy_list').css('height', main_h - 45 + 'px');

	var main_w = $(window).width();
	$('.xjhy').css('width', main_w - 40 + 'px');

	$(".tabBox .tabCont:first").css("display", "block");
	$(".tabBox .tabNav li").click(
			function() {
				$(this).siblings("li").removeClass("now");
				$(this).addClass("now");
				$(this).parents(".tabBox").find(".tabCont").css("display",
						"none");
				var i = $(this).index();
				$(this).parents(".tabBox").find(".tabCont:eq(" + i + ")")
						.css("display", "block");
			});

	$('.xial_m span').click(function() {
		$(this).parent('.xial_m').siblings('.xl_ctn').toggle();
	});
});
<!--框架高度设置-->
</script>
<script type="text/javascript">
 $(function(){
	getUserInfo('','');
}) 

function getUserInfoByName(){
	var username = $("input[name='username']").val();
	getUserInfo(username);
}

function getUserInfo(username){
	var i;
	$.ajax({
		url:'${ctx}/getUserInfo',
		data:{"username":username},
		type:'get',
		dataType:'json',
		async:false,
		beforeSend: function () {  
			i = layer.open({
				type:3,
				area:'500px',
				skin:'layui-layer-molv',
				shade:0.5,
				shadeClose:true,
				maxmin:true
			});
       	},
		success:function(data){
			layer.close(i);
			$("#userInfo").html("");
			if(data != null){
				$.each(data,function(index, item){
					var html = "";
					html += "<tr>";
					html += "<td>"+item.username+"</td>";
					 html += "<td>"+item.createtime+"</td>";
					html += "<td>";
						html += "<a href=\"javascript:void(0);\" class=\"btn\" onclick=\"updateUser('"+item.uuid+"')\">修改</a>";
						html += "<a href=\"javascript:void(0);\" class=\"btn\" onclick=\"deleteUser('"+item.uuid+"')\">删除</a>";
					html += "</td>";
					html += "</tr>";
					$("#userInfo").append(html);
				});
				
			}
			//添加分页
			//计算总数
			var total = 0;
			if(data == null){
				total = 0;
			}else if(data.length == 0 || data[0].cnt == null || data[0].cnt == "" || data[0].cnt == undefined){
				total = 0;
			}else{
				total = data[0].cnt;
			}
			//定义一个laypage实例
			var laypage = layui.laypage;
			laypage.render({
				elem : 'r_foot_m', //注意，这里的 test1 是 ID，不用加 # 号
				count: total,
				prev:'上一页',
				next:'下一页',
				cont: 'claimpage',
				skin: 'yahei',
				jump:function(obj,first){
					if(first!=true){//是否首次进入页面
						var currentPage = obj.curr;//获取点击的页码
						//通过当前页数，获取对应的数据
						$.ajax({
							url:'${ctx}/getUserInfo',
							data:{"username":username,"page":currentPage},
							type:'get',
							dataType:'json',
							beforeSend: function () {  
				                i = layer.open({
									type:3,
									area:'500px',
									skin:'layui-layer-molv',
									shade:0.5,
									shadeClose:true,
									maxmin:true
									});    
				            },  
							success:function(data){
								console.log(data);
								layer.close(i);
								$("#userInfo").html("");
								if(data != null){
									$.each(data,function(index, item){
										var html = "";
										html += "<tr>";
										html += "<td>"+item.username+"</td>";
										html += "<td>"+item.createtime+"</td>";
										html += "<td>";
										html += "<a href=\"javascript:void(0);\" class=\"btn\" onclick=\"updateUser('"+item.uuid+"')\">修改</a>";
										html += "<a href=\"javascript:void(0);\" class=\"btn\" onclick=\"deleteUser('"+item.uuid+"')\">删除</a>";
										html += "</td>";
										html += "</tr>";
										$("#userInfo").append(html);
									});
								}
							},
							error: function(data){
								layer.close(i);
							}
						});
					}
				}
			//数据总数，从服务端得到
			});
		}
	});
}
</script>
<script type="text/javascript">
//打开弹框 授予角色
var index ;
function updateUser(uuid){
	
	//通过id查询角色信息
	$.ajax({
		url:'${ctx}/getUserInfo',
		data:{"uuid":uuid},
		type:'get',
		dataType:'json',
		async:false,
		success:function(data){
			$.each(data,function(index, item){
			//添加下拉内容
			if(data!=null){
//				var selectInfo = getFunParentName(data.pid);
				var html = "";
				html += '<div class="tabCont">';
				html += '<input type="hidden" id="updateid" value="'+item.uuid+'"/>';
				html += '<ul class="hypz">';
				html += '	<li class="clearfix"><span class="title">修改用户名：</span>';
				html += '		<div class="li_r">';
				html += '			<input class="chang" name="user_update_name" type="text" value="'+item.username+'"> <i>*</i>';
				html += '		</div></li>';
				html += '	<li class="clearfix"><span class="title">修改用户密码：</span>';
				html += '		<div class="li_r">';
				html += '			<input class="chang" name="user_update_password" type="password" value="'+Base64.decode(item.password)+'"> <i>*</i>';
				html += '		</div></li>';
				html += '	<li class="clearfix"><span class="title">请确认您的密码：</span>';
				html += '		<div class="li_r">';
				html += '			<input class="chang" name="user_update_affirmpassword" type="password" value="'+Base64.decode(item.password)+'"> <i>*</i>';
				html += '		</div></li>';
				html += '	<li class="tj_btn"><a href="javascript:void(0);" onclick="updateUserInfo();">修改</a></li>';
				html += '</ul>';
				html += '</div>';
				//打开弹框，显示
				index = layer.open({
					type: 1,
					title:'用户修改',
					area: ['600px', '360px'],
					shadeClose: true, //点击遮罩关闭
					content: html
				});
			 }
		 });
		}
	});
}

function updateUserInfo(){
	var uuid = $("#updateid").val();
	var username = $("input[name='user_update_name']").val();
	var password = $("input[name='user_update_password']").val();
	var affirmpassword = $("input[name='user_update_affirmpassword']").val();
	if(username == null || username == "" || username == undefined){
		//提示不能为空
		layer.alert("用户名不能为空!");
		return ;
	}
	if(password == null || password == "" || password == undefined){
		//提示不能为空
		layer.alert("密码不能为空!");
		return ;
	}
	if(affirmpassword == null || affirmpassword == "" || affirmpassword == undefined){
		//提示不能为空
		layer.alert("确认密码不能为空!");
		return ;
	}
	if(password == affirmpassword){
		$.ajax({
			url:'${ctx}/updateUserInfo',
			data:{"uuid":uuid,"username":username,"password":password},
			type:'post',
			dataType:'html',
			success:function(data){
				if(data == "success"){
					layer.alert("修改成功!", function(){
						window.location.reload();
						parent.layer.close(index);
					});
				}
			}
		})
	}else{
		layer.alert("两次密码输入不一致!");
		return ;
	}
	
}
</script>
<script type="text/javascript">
//删除角色
function deleteUser(uuid){
	layer.confirm('确定要删除这个用户吗?',{icon: 3, title:'提示'}, function(index){
		$.ajax({
			url:'${ctx}/deleteUserInfo',
			data:{"uuid":uuid},
			type:'post',
			dataType:'html',
			success:function(data){
				if(data == "success"){
					layer.alert("删除成功!", function(){
						window.location.reload();
						parent.layer.close(index);
					});
				}
			}
		});
	});
}
</script>
<script type="text/javascript">
function addUserInfo(){
	var username = $("input[name='user_name']").val();
	if(username == null || username == "" || username == undefined){
		//提示不能为空
		layer.alert("用户名称不能为空!");
		return ;
	}
	var password = $("input[name='password']").val();
	if(password == null || password == "" || password == undefined){
		//提示不能为空
		layer.alert("密码不能为空!");
		return ;
	}
	var affirmpassword = $("input[name='affirmpassword']").val();
	if(affirmpassword == password){
		$.ajax({
			url:'${ctx}/addUserInfo',
			data:{"username":username,"password":password},
			type:'post',
			dataType:'html',
			success:function(data){
				console.log(data);
				if(data == "success"){
					layer.alert("添加成功!", function(){
						window.location.reload();
						parent.layer.close(index);
					});
				}else if(data=="has"){
					layer.alert("该用户名已存在!");
				}
			}
		});
	}else if(affirmpassword == null || affirmpassword == "" || affirmpassword == undefined){
		//提示不能为空
		layer.alert("确认密码不能为空!");
		return ;
	}else {
		layer.alert("两次输入密码不一致!")
		return ;
	}
}
</script>
<div id="right_ctn">
	<div class="right_m">
		<!--列表-->
		<div class="hy_list">
			<div class="box_t">
				<span class="name">用户列表</span>
				<!--当前位置-->
				<div class="position">
					<a href=""><img src="${ctx}/images/icon5.png" alt="" /></a> <a
						href="">首页</a> <span><img src="${ctx}/images/icon3.png"
						alt="" /></span> <a href="">用户管理</a> <span><img
						src="${ctx}/images/icon3.png" alt="" /></span> <a href="">用户列表</a>
				</div>
				<!--当前位置-->
			</div>
			
			<!--新建权限-->
			<form action="" method="post">
				<div class="xjhy" style="padding: 0px;">
					<div class="tabBox_t">
						<div class="tabBox">
							<ul class="tabNav">
								<li class="now"><span>用户查询</span></li>
								<li><span>添加用户</span></li>
							</ul>
							<div class="tabCont" style="display: block;overflow:auto;">
								<!--所有权限-->
								<ul class="hypz gjpz clearfix">
									<!--查询-->
									<div class="search">
										<span>按用户昵称查询：</span>
										<div class="s_text">
											<input name="username" type="text">
										</div>
										<a href="javascript:void(0);" class="btn"
											onclick="getUserInfoByName()">查询</a>
									</div>
									<!--查询-->
									<div class="space_hx">&nbsp;</div>
									<!--列表-->
									<form action="" method="post">
										<table cellpadding="0" cellspacing="0" class="list_hy" style="width:98%;">
											<tr>
												<th scope="col">用户名称</th>
												<th scope="col">创建时间</th>
												<!-- <th scope="col">用户身份</th> -->
												<th scope="col">操作</th>
											</tr>
											<tbody id="userInfo">
											</tbody>
										</table>
										<!--列表-->
										<!--右边底部-->
										<div class="r_foot">
											<div class="r_foot_m" id="r_foot_m">
											</div>
										</div>
									</form>
									<!--右边底部-->
								</ul>
								<!--所有权限-->
							</div>
							<div class="tabCont" style="height:515px;overflow:auto;">
								<!--添加权限-->
								<ul class="hypz">
									<li class="clearfix"><span class="title">用户名称：</span>
										<div class="li_r">
											<input class="chang" name="user_name" type="text"> <i>*</i>
										</div></li>
									 <li class="clearfix"><span class="title">输入密码：</span>
										<div class="li_r">
											<input class="chang" name="password" type="password"> <i>*</i>
										</div></li>
									 <li class="clearfix"><span class="title">输入确认密码：</span>
										<div class="li_r">
											<input class="chang" name="affirmpassword" type="password"> <i>*</i>
										</div></li>
									<li class="tj_btn"><a href="javascript:void(0);" onclick="addUserInfo();">添加</a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
		<!--列表-->
	</div>
</div>